<template>
  <div>
    <header class="setting-header">
      <div class="setting-header-title">
        <h1>设置</h1>
        <a-divider type="vertical" />
        <h2>Setting</h2>
      </div>

      <div class="setting-header-tool-bar">
        <div class="setting-refresh-container">
          <a-button> REFRESH </a-button>
        </div>
        <div class="setting-search-container">
          <a-input-search placeholder="input setting" style="width: 200px" />
        </div>
      </div>
    </header>

    <a-collapse>
      <a-collapse-panel key="1" header="Administer Information Setting">
        <p>{{ text }}</p>
      </a-collapse-panel>

      <a-collapse-panel key="2" header="Activity Setting">
        <p>Activity approval settings</p>
        <a-radio-group name="radioGroup" :default-value="1">
          <a-radio :style="radioStyle" :value="1">
            Each activity needs to be approved by the administrator
          </a-radio>
          <a-radio :style="radioStyle" :value="2">
            Activities published by the administrator do not require approval
          </a-radio>
          <a-radio :style="radioStyle" :value="3">
            All activities do not require approval
          </a-radio>
        </a-radio-group>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="User Setting">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: `No setting`,
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
    };
  },
};
</script>


<style lang="less" scope>
.setting-header {
  .setting-header-title {
    display: flex;
    align-items: center;
    h1 {
      font-size: 36px;
      // margin: 10px;
    }
    h2 {
      margin: 0 0 0 20px;
    }
  }
  .setting-header-tool-bar {
    margin: 0 0 20px 0;
    display: flex;

    .setting-refresh-container {
      margin: 0 20px 0 0;
    }
  }
}
</style>